  <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="./css/screen.css">
</head>
<body>

<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="../../build/event/event-min.js" ></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>

<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>

<script type="text/javascript" src="../../build/animation/animation.js"></script>

<script type="text/javascript">

YAHOO.example.DDApp = function() {
    var dd;
    var clickRadius = 46, startPos = [105, 280];
    var Event=YAHOO.util.Event
    var Dom=YAHOO.util.Dom;

    return {
        init: function() {

            var el = Dom.get("dragDiv1");
            // Event.on(el, "selectstart", Event.preventDefault);

            dd = new YAHOO.util.DD(el);

            dd.clickValidator = function(e) {

                // get the screen rectangle for the element
                var el = this.getEl();
                var region = Dom.getRegion(el);

                // get the radius of the largest circle that can fit inside
                // var w = region.right - region.left;
                // var h = region.bottom - region.top;
                // var r = Math.round(Math.min(h, w) / 2);
                //-or- just use a well-known radius
                var r = clickRadius;

                // get the location of the click
                var x1 = Event.getPageX(e), y1 = Event.getPageY(e);

                // get the center of the circle
                var x2 = Math.round((region.right+region.left)/2);
                var y2 = Math.round((region.top+region.bottom)/2);


                // I don't want text selection even if the click does not
                // initiate a drag
                Event.preventDefault(e);

                // check to see if the click is in the circle
                return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) <= r*r );
            };

            dd.onDragDrop = function(e, id) {
                // center it in the square
                Dom.setXY(this.getEl(), Dom.getXY(id));
            }

            dd.onInvalidDrop = function(e) {
                // return to the start position
                // Dom.setXY(this.getEl(), startPos);

                // Animating the move is more intesting
                new YAHOO.util.Motion( 
                    this.id, { 
                        points: { 
                            to: startPos
                        }
                    }, 
                    0.3, 
                    YAHOO.util.Easing.easeOut 
                ).animate();

            }

            dd2 = new YAHOO.util.DDTarget("dragDiv2");
        }
    }
} ();
    
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
    
</script>

<style type="text/css">

#dragDiv1 { 
    background:url(img/circle.gif) 0 0 no-repeat;
    top:280px; left:105px;
    border:0px solid black;
    z-index:10;
    cursor:default;
}

#dragDiv2 { 
    background:url(img/sq2.png) 0 0 no-repeat;
    background:#A0B9A6;top:390px; left:215px;
    border:0px solid black;
    cursor:default;
}

</style>

<div id="pageTitle"><h3>Drag and Drop - YAHOO.util.DD</h3></div>


<style type="text/css">

/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */


</style>


<img id="ylogo" src="img/logo.gif" />

<div id="container">
<div id="containerTop">
<div id="header">
<h4>&nbsp;</h4>
</div>
<div id="main">

<div id="rightbar">

<div id="rightBarPad">
<h3>Examples</h3>

<div id="linkage">
<ul>
<li><a href="drag.html?mode=dist">Drag test</a></li>
<li><a href="ontop.html?mode=dist">Always on top</a></li>
<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
<li><a href="list.html?mode=dist">Sortable list</a> </li>
<!--
<li><a href="slider.html?mode=dist">Slider</a></li>
-->
<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
<li><a href="grid.html?mode=dist">Grid</a></li>
<li><a href="resize.html?mode=dist">Resize pane</a></li>
<li><a href="circle.html?mode=dist">Custom click validator</a></li>

</ul>
</div> 



<script type="text/javascript">
//<![CDATA[
    YAHOO.example.logApp =  {

       reader: null,

       init:  function() {
            if (YAHOO.widget.Logger) {
                this.reader = new YAHOO.widget.LogReader( "logDiv", 
                        { newestOnTop: true, height: "400px" } );

                this.reader._onClickPauseBtn(null, this.reader);
            }
        }
    };

    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);

//]]>
</script>

</h4>
<div id="logDiv"></div>
</div>


</div>

<div id="content">
<form name="dragDropForm" action="javscript:;">
<div class="newsItem">
  <h3>Custom Click Validator Implementation and onInvalidDrop</h3>
  <p>

  In this example, we override clickValidator to provide custom logic for
  determining if the initial mousedown should initiate a drag.  A drag is 
  initiated only if the mousedown happens inside of the circle.  

  <br />
  
  In addition, the circle snaps back to its inital position if not dropped 
  on a target.  This is done by overriding the onInvalidDrop method.

  </p>

<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>

</div>
</form>
</div>

      <div id="footerContainer">
        <div id="footer">
          <p>&nbsp;</p>
        </div>
      </div>
    </div>
  </div>
</div>


<div id="dragDiv1" class="testSquare" ><br />DD</div>
<div id="dragDiv2" class="testSquare" >DDTarget</div>

</body>
</html>
